<template>
  <div class="mainPage">
    <div class="mainPage_top">
      <div>
        <el-button type="success" size="medium" style="margin-bottom: 0.1rem" @click="modal = true">上传模板</el-button>
      </div>
      <el-select v-model="value" placeholder="全部模板列表" style="margin-top: 20px;" @change="onTypeChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <Table class="table" style="width: 100%  !important;" highlight-row :columns="columns" :data="tableData">
    </Table>
    <Modal v-model="modal" title="上传模板" @on-ok="ok" width="768" ok-text="上传提交" @on-cancel="cancel">
      <el-form :model="subjectName" :rules="rules" ref="ruleForm">
        <div style=" margin-bottom: 30px;">注意事项：团队预约模板仅支持上传 <span style="color: red;">excel格式</span> , 安全承诺书仅支持上传<span
            style="color: red;">pdf/word/png/jpg/jpeg格式</span></div>
        <el-form-item label="请选择模板类型:">
          <el-select v-model="subjectName.region" placeholder="请选择模板类型">
            <el-option label="团队预约模板" value="1"></el-option>
            <el-option label="安全承诺书模板" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请输入模板名称:" :label-width="formLabelWidth" style="display: flex;">
          <el-input v-model="subjectName.name" placeholder="请输入模板名称"></el-input>
        </el-form-item>
        <el-form-item label="是否启用:" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="subjectName.states" :label="1">启用</el-radio>
            <el-radio v-model="subjectName.states" :label="2">禁用</el-radio>
          </template>
        </el-form-item>
        <el-upload class="upload-demo" :action="baseUrl + 'chongqing/stage/file/uploadTemplateFile'"
          :on-remove="handleRemove" multiple :limit="1" :before-upload="beforeupload" :on-success="onsuccess"
          :headers="headers" :file-list="fileList">
          <el-button size="small" :disabled="subjectName.region === ''" type="primary">点击上传</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>

      </el-form>
    </Modal>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        pagId: "",
        tableData: [],
        downloadUrl: "",
        fileList: [],
        value: "全部模板类型",
        options: [{
          value: '0',
          label: '全部模板类型'
        }, {
          value: '1',
          label: '团队预约模板'
        }, {
          value: '2',
          label: '安全承诺书'
        }],
        modal: false,
        imgurl1: "",
        subjectName: {
          region: '',
          states: 1,
          id: 0,
          name: ''
        },
        columns: [{
            title: "是否可用",
            align: "center",
            width: 200,
            render: (h, params) => {
              let color = "";
              let content = "";
              if (params.row.states === 1) {
                color = "green";
                content = "启用";
              }
              if (params.row.states === 2) {
                color = "red";
                content = "禁用";
              }
              return h(
                "Tag", {
                  props: {
                    color: color
                  },
                },
                content
              );
            },
          },
          {
            title: "模板名称",
            key: "name",
            align: "center",

          },

          {
            title: "模板类型",
            // key: "templateType",
            align: "center",
            render: (h, params) => {
              let color = "";
              let content = "";
              if (params.row.templateType === 1) {
                content = "团队预约模板";
              }
              if (params.row.templateType === 2) {
                content = "安全承诺书模板";
              }
              return h(
                "div", {
                  props: {

                  },
                },
                content
              );
            },
          },
          {
            title: '上传人',
            key: 'uploader',
            align: 'center',


          },
          //   {
          //     title: '上传时间',
          //     key: 'faceUrl',
          //     align: 'center',
          //     width: 150,

          //   },
          {
            title: '文件大小',
            key: 'fileSize',
            align: 'center',


          },
          {
            title: '操作',
            align: 'center',
            width: '350px',
            // fixed: 'right',
            render: (h, params) => {
              return h('div', [
                h(
                  'Button', {
                    props: {
                      type: 'primary',
                      disabled: params.row.states === 1
                    },
                    style: {
                      'margin-left': '10px'
                    },
                    on: {
                      click: () => {
                        this.getUpdate(params, 1)
                      }
                    }
                  },
                  '启用'
                ),
                h(
                  'Button', {
                    props: {
                      type: 'error',
                      disabled: params.row.states === 2
                    },
                    style: {
                      'margin-left': '10px'
                    },
                    on: {
                      click: () => {
                        this.getUpdate(params, 2)

                        // this.look(params)
                      }
                    }
                  },
                  '禁用'
                ),
                h(
                  'Button', {
                    props: {
                      type: 'info'
                    },
                    style: {
                      'margin-left': '10px'
                    },
                    on: {
                      click: () => {
                        this.bianji(params)
                      }
                    }
                  },
                  '编辑'
                ),
                h(
                  'Button', {
                    props: {
                      type: 'error'
                    },
                    style: {
                      'margin-left': '10px'
                    },
                    on: {
                      click: () => {
                        // this.del(params)
                        this.open(params)
                      }
                    }
                  },
                  '删除'
                )
              ])
            }
          }
        ],
        type: {
          1: ['xls', 'xlsx'],
          2: ['pdf', 'doc', 'docx', "jpg", "png", "jpeg"]
        },
        headers: {
          token: localStorage.getItem("token")
        }
      }
    },
    created() {
      //进来就请求列表
      this.upList()
    },
    methods: {
      //点击修改
      bianji(params) {
        this.modal = true;
        console.log(params);
        if (params.row.templateType == 1) {
          this.subjectName.region = "团队预约模块"
        } else if (params.row.templateType == 2) {
          this.subjectName.region = "安全承诺书模块"
        }
        //对象解构
        const {
          downloadUrl,
          id,
          name,
          states,
          templateType
        } = params.row
        templateType,
        this.subjectName.states = states,
          this.subjectName.name = name,
          this.subjectName.id = id
        this.downloadUrl = downloadUrl
        this.pagId = id
        const data = [{
          name,
          url: downloadUrl
        }]
        this.fileList = data
      },
    // 点击删除弹框
    //  open(params) {
    //   // console.log(params);
    //   // let that=this
    //   //  this.$http("/chongqing/stage/template/deleteTemplate",{
    //   //   id:params.row.id
    //   //  },"post",(res)=>{
    //   //   console.log(res);
    //      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       that.del(params)
    //       this.$message({
    //         type: 'success',
    //         message: '删除成功!'

    //       }).catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除'
    //       });          
    //     });;
    //     })
    //   //  })
    //   },



      //启用  禁用按钮
      getUpdate(params, states) {
        this.$http("/chongqing/stage/template/updateState", {
          //该行的id
          id: params.row.id,
          //状态
          states
        }, "post", (res) => {
          console.log(res);
          //刷新列表
          this.upList()
        })
      },

      //选项框改变  全部模块类型  团队预约模块  安全承诺书模块  的select 下拉框改变
      onTypeChange(e) {
        this.upList(e)
      },


      //获取列表  获取页面列表
      upList(type = 0) {
        this.$http("/chongqing/stage/template/findTemplates", {
          "templateType": type
        }, "post", (res) => {
          console.log(res);
          //复制给表头  动态赋值给表头  
          this.tableData = res.data.data
        })
      },
        //删除接口
    open(params) {
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.del(params)
          this.$message({
            type: 'success',
            message: '删除成功!'

          }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });;
        })
    },

     del(params){
          this.$http("/chongqing/stage/template/deleteTemplate", {
        id: Number(params.row.id)
      }, "get", (res) => {
        console.log(res);
        if(res.data.code == 1000){
          this.upList()
        }   
      })
      },

      //判断上传文件类型   300到318行不用看
      beforeupload(file) {
        const exe = file.name.split('.')
        const str = exe[exe.length - 1]
        console.log(this.type[this.subjectName.region].includes(str));
        if (!this.type[this.subjectName.region].includes(str)) {
          this.$message.error('上传文件类型错误');
          return false
        }
        // console.log(file);
      },
      onsuccess(file) {
        // console.log(file);
        this.downloadUrl = file.data.downloadUrl;
        // console.log(this.downloadUrl);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },


      //上传模板的点击提交的按钮的成功回调
      ok() {
        console.log("333");
        this.$http("/chongqing/stage/template/saveOrUpdateTemplate", {
          downloadUrl: this.downloadUrl,
          fileSize: 0,
          id: this.pagId,
          name: this.subjectName.name,
          states: this.subjectName.states,
          storageUnit: 0,
          templateType: this.subjectName.region
        }, 'post', (res) => {
          console.log(res);
          //上传成功要清除弹出框的内容的值  下边写了一个方法
          this.reset()
          //上传成功之后再去请求列表接口
          this.upList()
        })
      },



      //取消的回调
      cancel() {
        this.reset()
      },
      //清空弹出框中的数据
      reset() {
        this.downloadUrl = "",
          this.fileSize = "",
          this.id = 0,
          this.subjectName.name = "",
          this.subjectName.states = 1,
          this.subjectName.region = "",
          this.fileList = []
      }
    }
  }

</script>
<style>

</style>
